<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <el-button
        class="el-icon-plus"
        type="primary"
        size="small"
        @click="addData()"
      >
        添加
      </el-button>
    </div>
    <el-table :data="this.tableState.trademarkList" border style="width: 100%">
      <el-table-column type="index" label="序号" align="center" width="80">
      </el-table-column>
      <el-table-column prop="tmName" label="品牌名称" width="300">
      </el-table-column>
      <el-table-column src="logoUrl" label="品牌LOGO">
        <template v-slot="{ row }">
          <el-image
            :src="row.logoUrl"
            style="width: 100px; height: 100px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            class="el-icon-edit-outline"
            type="warning"
            size="mini"
            @click="changeData(row)"
          >
            修改</el-button
          >
          <el-popconfirm
              :title="`确定删除 ${row.tmName} 吗?`"
              @confirm="removeUser(row.id)"
            >
              <template #reference>
                <el-button
                  style="margin-left: 10px"
                  type="danger"
                  size="small"
                  class="el-icon-delete"
                  title="删除品牌"
                />
              </template>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="block mt20">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.paramsState.page"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="this.paramsState.limit"
        layout=" prev, pager, next, jumper, -> ,sizes,total"
        :total="this.tableState.total"
      >
      </el-pagination>
    </div>
    <!-- 添加&修改弹框 -->
    <div>
      <el-dialog
        :title="this.tableState.trademarkList.id ? '修改品牌' : '添加品牌'"
        :visible.sync="dialogFormVisible"
        top="0px"
      >
        <el-form  :rules="rules">
          <el-form-item label="品牌名称" prop="name" label-width="100px">
            <el-input  autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="品牌LOGO" prop="img" label-width="100px">
            <el-upload
              class="avatar-uploader"
              action
              border
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="this.tableState.trademarkList.imageUrl"
                :src="this.tableState.trademarkList.imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <template #tip>
                <div class="el-upload__tip">
                  上传的图片必须是jpg且不能大于2M
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrchangeData()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import Api from "@/api/trademark";
export default {
  name: "Good",
  data() {
    return {
      paramsState: {
        page: 1,
        limit: 3,
      },
      tableState: {
        total: 0,
        trademarkList: [],
        imageUrl: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        img: [
          { required: true, message: "请上传图片", trigger: "blur" },
          { message: "必须上传图片", trigger: "blur" },
        ],
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    /**
     * 获取数据
     */
    async getTrademarkList(
      page = this.paramsState.page,
      limit = this.paramsState.limit
    ) {
      try {
        this.paramsState.page = page;
        this.paramsState.limit = limit;
        const result = await Api.getPageList(page, limit);
        console.log(result);
        this.tableState.trademarkList = result.data.records;
        this.tableState.total = result.data.total;
      } catch (error) {
        console.log(error);
        this.$message({ message: "获取列表失败", type: "waring" });
      }
    },
    handleSizeChange(val) {
      this.paramsState.limit = val;
      this.getTrademarkList();
    },
    handleCurrentChange(val) {
      this.paramsState.page = val;
      this.getTrademarkList();
    },
    /**
     * 添加数据
     */
    addData() {
      this.dialogFormVisible = true;
      // this.tableState.trademarkList = {
      //   logoUrl: "",
      //   tmName: "",
      // };
      // this.tableState.trademarkList?.clearValidate()
    },
    /**
     * 更新数据
     */
    changeData(row) {
      this.dialogFormVisible = true;
      // this.tableState.trademarkList = { ...row };
      // console.log(row);
    },
    /**
     * 删除数据
     */
    async removeUser(id){
      try{
        await Api.delete(id)
        this.getTrademarkList()
        console.log(11111);
      }catch(e){

      }
    },
    //添加修改数据
    async addOrchangeData() {
      // const trademark = this.tableState.trademarkList;
      try {
        await Api.addOrUpdate(trademark);
        this.$message({
          message: this.tableState.trademark.id
            ? "修改品牌成功"
            : "添加品牌成功",
          type: "success",
        });
        dialogFormVisible.value = false;
      } catch (error) {
        this.$message({
          message: this.tableState.trademark.id
            ? "修改品牌失败"
            : "添加品牌失败",
          type: "waring",
        });
      }
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {
    this.getTrademarkList();
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
